<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-09-01
 * @FilePath: /element-admin/src/views/GitUsers.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Sys-Dicts-page">
    <!--顶部搜索栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item>
              <el-button type="primary" @click="handleFetch" class="register_btn" size="small">刷新</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" @click="handleAdd" class="register_btn" size="small">更新参数</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--中部数据表格栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-card class="card-top-container" v-loading="isLoading">
            <template #header>
              <div class="card-header">
                <span style="font-size: 22px;">云打印机设置参数数据</span>
                <el-button type="text" style="float: right;" @click="handleChg">修改</el-button>
              </div>
            </template>
            <el-form :model="PrintSetting" label-width="140px">
              <el-form-item label="飞鹅云后台地址">
                <el-col :span="6">
                  <el-input v-model="PrintSetting.url"
                            :disabled="isReadOnlyFlg"
                            placeholder="飞鹅云后台地址" size="small" :clearable="true"
                            maxlength="3"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="飞鹅云后台注册账号">
                <el-col :span="6">
                  <el-input v-model="PrintSetting.user"
                            :disabled="isReadOnlyFlg"
                            placeholder="飞鹅云后台注册账号" size="small" :clearable="true"
                            maxlength="3"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="飞鹅云后台注册账号后生成的UKEY">
                <el-col :span="6">
                  <el-input v-model="PrintSetting.ukey"
                            :disabled="isReadOnlyFlg"
                            placeholder="飞鹅云后台注册账号后生成的UKEY" size="small" :clearable="true"
                            maxlength="3"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="打印机编号">
                <el-col :span="6">
                  <el-input v-model="PrintSetting.sn"
                            :disabled="isReadOnlyFlg"
                            placeholder="打印机编号" size="small" :clearable="true"
                            maxlength="3"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="标签纸宽">
                <el-col :span="6">
                  <el-input v-model="PrintSetting.width" placeholder="标签纸宽" size="small" :clearable="true"
                            maxlength="3"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="标签纸长">
                <el-col :span="6">
                  <el-input v-model="PrintSetting.height" placeholder="标签纸长" size="small" :clearable="true"
                            maxlength="3"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="打印方向">
                <el-col :span="24">
                  <el-radio v-model="PrintSetting.direction" label="0">横向</el-radio>
                  <el-radio v-model="PrintSetting.direction" label="1">竖向</el-radio>
                </el-col>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import {fetch, setPrinter} from "@/api/PrintSettingApi";


export default {
  name: "PrintSettingView",
  components: {},
  data() {
    return {
      isLoading: true,
      isReadOnlyFlg: true,
      PrintSetting: {
        url:"",
        user:"",
        ukey:"",
        sn:"",
        width: 50,
        height: 40,
        direction:1,
      },
      query:{
        id:0
      }
    }
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    dataInit() {
      return {
        url:"",
        user:"",
        ukey:"",
        sn:"",
        width:30,
        height:40,
        direction:1,
      }
    },
    handleFetch() {
      this.isLoading = true;
      fetch(this.query).then(res => {
        this.PrintSetting = res.data;
        this.isLoading = false;
      }).catch(err => {
        this.isLoading = false;
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    async handleAdd() {
      await setPrinter({"data":this.PrintSetting}).then(res => {
        if (res["code"] == 200){
          this.PrintSetting = this.dataInit();
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
          this.handleFetch();
        }else{
          this.$notify({title: '执行失败', message: '数据操作异常' + res["message"], type: 'error', offset: 100});
        }
        this.isLoading = false;
      }).catch(err => {
        this.isLoading = false;
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    handleChg() {
      if (this.isReadOnlyFlg) {
        this.isReadOnlyFlg = false;
      } else {
        this.isReadOnlyFlg = true;
      }

    }
  },
  created() {
    this.handleFetch();
  },
  mounted() {
  },
}
</script>
<style scoped>

.custRow {
  display: flex;
  margin-top: 5px;
  padding: 5px 5px 5px 5px;
}
</style>